<template>
  <div class="remark">
    <div class="header">
      <div class="itme" @click="cancel">取消</div>
      <div class="itme">设置备注</div>
      <div class="itme btnBox">
        <div class="btn" @click="finish">完成</div>
      </div>
    </div>
    <p>备注名</p>
    <div class="input">
      <input type="text" v-model="value" placeholder="设置备注">
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: ""
    };
  },
  methods: {
    finish() {
      this.$router.go(-1);
    },
    cancel() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="stylus" scoped>
.remark {
  .header {
    display: flex;
    line-height: 1.2rem;
    padding: 0 0.2rem;

    .itme {
      flex: 1;
    }

    .btnBox {
      .btn {
        background: #3399FF;
        color: #fff;
        min-width: 1.12rem;
        height: 0.63rem;
        line-height: 0.63rem;
        opacity: 0.62;
        border-radius: 6px;
        text-align: center;
        float: right;
        margin-top: 14px;
        font-size: 13px;
        padding: 0 0.1rem;
      }
    }
  }

  p {
    font-size: 10px;
    margin-left: 10px;
  }

  .input {
    width: 100%;
    height: 0.8rem;
    border-top: 1px solid rgba(13, 13, 13, 0.1);
    margin-top: 10px;

    input {
      width: 100%;
      height: 100%;
      padding: 0 10px;
    }
  }
}
</style>

